import React from "react";
import moduleName from "../MIUIcss/home.scss";

function Home() {
  return (
    <>
      <div className="top">
        <div className="search">
          <i className="fa fa-commenting"></i>
          <input type="text" placeholder="小米电视899元起" className="input" />
          <i className="fa fa-search"></i>
        </div>
        <div className="paging">
          <ul className="title">
            <li>推荐</li>
            <li>手机</li>
            <li>全面屏</li>
            <li>智能</li>
            <li>电视</li>
            <li>电脑</li>
            <li>生活周边</li>
          </ul>
        </div>
        <div className="circle">
          <ul className="c-u">
            <li className="all-li">
              <div className="little">小</div>
              <p>买小送大</p>
            </li>
            <li className="all-li">
              <div className="little">米</div>
              <p>百元福利</p>
            </li>
            <li className="all-li">
              <div className="little">感</div>
              <p>1元秒杀</p>
            </li>
            <li className="all-li">
              <div className="little">恩</div>
              <p>智能特惠</p>
            </li>
            <li className="all-li">
              <div className="little">季</div>
              <p>订单抽奖</p>
            </li>
          </ul>
        </div>
      </div>
      <div className="center">
        <div className="hint">
          <p>热卖爆品，火热感恩</p>
          <p>千元全面屏现货抢</p>
        </div>
        <div className="new-good">
          <div className="hot">
            <div className="h-img">
              <div className="red">新品热卖</div>
              <img src="../../src/image/home/img12201.jpg" alt="" />
            </div>
            <p>红米5 puls</p>
            <p>千元全面屏，前置柔光自拍</p>
            <p>￥999元起</p>
            <button>立即购买</button>
          </div>
          <div className="sale">
            <div className="h-img">
              <div className="red">新品热卖</div>
              <img src="../../src/image/home/img1245.jpg" alt="" />
            </div>
            <p>红米5</p>
            <p>千元全面屏，前置柔光自拍</p>
            <p>￥799元起</p>
            <button>立即购买</button>
          </div>
        </div>
        <div className="pic">
          <div className="p-note">
            <div className="photograph">拍照旗舰</div>
            <div className="minus">减100 送AI音箱</div>
            <img src="../../src/image/home/img12361.jpg" alt="" />
          </div>
          <div className="note3">
            <p>小米Note 3 6GB+128GB</p>
            <span>￥799元起</span>
          </div>
          <div className="buy">
            <p>6GB+128GB，支持人脸解锁</p>
            <button>立即购买</button>
          </div>
        </div>
        <div className="pic">
          <div className="p-note">
            <div className="photograph">今日热卖</div>
            <div className="minus">减100 送AI音箱</div>
            <img src="../../src/image/home/img12361.jpg" alt="" />
          </div>
          <div className="note3">
            <p>小米Note 3 6GB+128GB</p>
            <span>￥799元起</span>
          </div>
          <div className="buy">
            <p>6GB+128GB，支持人脸解锁</p>
            <button>立即购买</button>
          </div>
        </div>
        <div className="strategy ">
          <div className="icon-text">
            <div className="fa">
              <i className="fa fa-bookmark-o fa-4x"></i>
            </div>
            <p className="gonglue">
              感恩季必读省钱攻略 <br /> 怎么买最划算？
              <i className="fa fa-arrow-circle-o-right"></i>
            </p>
          </div>
        </div>
      </div>
      <div className="welfare">
        <div className="addition">
          <span>
            附加福利，
            <br /> 送手机感恩礼
          </span>
          <p>领取福利</p>
          <p>挑选手机</p>
        </div>
        <div className="two-box">
          <p>福利</p>
          <div></div>
        </div>
      </div>
      <div className="context-bottom">
        <div className="preference">
          <p>旗舰手机感恩特惠</p>
          <p>多款手机享花呗6期 / 小米分期12期免息</p>
        </div>
        <div className="pic">
          <div className="p-note">
            <div className="photograph">今日热卖</div>
            <div className="minus">减100 送AI音箱</div>
            <img src="../../src/image/home/img12361.jpg" alt="" />
          </div>
          <div className="note3">
            <p>小米Note 3 6GB+128GB</p>
            <span>￥799元起</span>
          </div>
          <div className="buy">
            <p>6GB+128GB，支持人脸解锁</p>
            <button>立即购买</button>
          </div>
        </div>
        <div className="new-good">
          <div className="hot">
            <div className="h-img">
              <div className="red">新品热卖</div>
              <img src="../../src/image/home/img12201.jpg" alt="" />
            </div>
            <p>红米5 puls</p>
            <p>千元全面屏，前置柔光自拍</p>
            <p>￥999元起</p>
            <button>立即购买</button>
          </div>
          <div className="sale">
            <div className="h-img">
              <div className="red">新品热卖</div>
              <img src="../../src/image/home/img1245.jpg" alt="" />
            </div>
            <p>红米5</p>
            <p>千元全面屏，前置柔光自拍</p>
            <p>￥799元起</p>
            <button>立即购买</button>
          </div>
        </div>
        <div className="thousand">千元全面屏 红米国民手机</div>
        <div className="big-img">
          <img src="../../src/image/home/img1279.jpg" alt="" />
        </div>
      </div>
    </>
  );
}

export default Home;
